import { Divider } from 'antd'
import dayjs from 'dayjs'
import { useEffect, useState } from 'react'

import { calculateServiceDaysApi } from '@/api/pcs/pcsCompanionOrder'
import AekModal, { PromiseThen } from '@/components/AekModal'
import Ellipsis from '@/components/Ellipsis'
import { message } from '@/utils/antdHelper'
import { multiply } from '@/utils/calculate'
import { formatDate, formatMoneyNum } from '@/utils/displayHelper'
import { ACCOMPANYING_PERIOD_ENUM, PCS_COMPANION_PERIOD_ENUM } from '@/utils/enum'
import { requestWithTry } from '@/utils/request'

import DatePickerWithSelect from '../DatePickerWithSelect'

import styles from './index.module.less'

const RenewModal = ({ detailData }) => {
  const [value, setValue] = useState()
  const [day, setDay] = useState(0)

  const { orderDetail } = detailData
  const {
    companionComboName,
    price,
    companionComboContent,
    startDate,
    startPeriod,
    endDate,
    endPeriod,
    servicePeriod,
  } = orderDetail

  const totalAmount = multiply(detailData.orderDetail.price, day)

  const calculateServiceDays = async () => {
    const params = {
      id: detailData.id,
      endDate: formatDate(value.datePicker),
      endPeriod: value.select,
    }
    const { data } = await requestWithTry(calculateServiceDaysApi, params)
    setDay(data)
  }

  useEffect(() => {
    if (!value?.datePicker || !value?.select) return
    calculateServiceDays()
  }, [JSON.stringify(value)])

  const onOk = async () => {
    if (!value?.datePicker || !value?.select) {
      message.warning('请选择时间')
      return Promise.reject()
    }
    return value
  }

  return (
    <AekModal title='服务续费' onOk={onOk}>
      <div className={`${styles.accompanyingPlanCard} mt20px`}>
        <div className='flex justify-between'>
          <div>
            <div className={styles.name}>{companionComboName}</div>
            <Ellipsis className='mt4px' tooltip lines={1}>
              {companionComboContent}
            </Ellipsis>
            <div className={styles.time}>
              {formatDate(startDate)} {PCS_COMPANION_PERIOD_ENUM.getText(startPeriod)} - {formatDate(endDate) || ''}{' '}
              {PCS_COMPANION_PERIOD_ENUM.getText(endPeriod) || ''}
            </div>
          </div>
          <div className={styles.right}>
            <div>￥{formatMoneyNum(price)} </div>
            <div className='mt10px'>x {detailData.orderDetail.serviceDays}</div>
            <div className='mt10px'>{ACCOMPANYING_PERIOD_ENUM.getText(servicePeriod)}</div>
          </div>
        </div>
      </div>
      <div className='mt20px text-16px font-bold'>选择购买时长</div>
      <DatePickerWithSelect
        className='mt10px'
        value={value}
        onChange={value => setValue(value)}
        disabledDate={current =>
          current &&
          ((endPeriod === PCS_COMPANION_PERIOD_ENUM.BEFORE12 && current < dayjs(endDate).startOf('d')) ||
            (endPeriod === PCS_COMPANION_PERIOD_ENUM.AFTER12 && current <= dayjs(endDate).endOf('d')))
        }
        disabledSelect={optionValue =>
          optionValue === PCS_COMPANION_PERIOD_ENUM.BEFORE12 &&
          dayjs(endDate).startOf('d').valueOf() === value?.datePicker?.startOf('d').valueOf() &&
          endPeriod === PCS_COMPANION_PERIOD_ENUM.BEFORE12
        }
      />
      <Divider size='small' />
      <div className='text-14px flex justify-between'>
        <span>服务天数</span>
        <span>共{day}天</span>
      </div>
      <div className='mt10px text-14px flex justify-between'>
        <span>待付款</span>
        <span className='c-money text-24px'>{formatMoneyNum(totalAmount)}</span>
      </div>
    </AekModal>
  )
}

RenewModal.PromiseThen = PromiseThen

export default RenewModal
